<template>
	<view>
		<view class="head_bg">
			<image src="/static/imgs/income/bg.png"></image>
		</view>
		<view class="income-data-wrap flex flex-col justify-between">
			<view class="flex-none px-4 pt-4">
				所有业绩
			</view>
			<view class="flex flex-1 px-4 flex-col justify-center justify-items-center items-center">
				<view class="flex justify-between justify-items-center items-center w-full">
					<view class="flex flex-col justify-center justify-items-center items-center">
						<view class="text-color-red">￥1000.55</view>
						<view class="mt-1">今日收益</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center items-center ml-5">
						<view class="text-color-red">￥1000.55</view>
						<view class="mt-1">今日个人业绩</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center items-center ml-5">
						<view class="text-color-red">￥1000.55</view>
						<view class="mt-1">今日团队业绩</view>
					</view>
				</view>
				<view class="flex justify-between justify-items-center items-center mt-4 w-full">
					<view class="flex flex-col justify-center justify-items-center items-center">
						<view class="text-color-red">￥1000.55</view>
						<view class="mt-1">今日收益</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center items-center ml-5">
						<view class="text-color-red">￥1000.55</view>
						<view class="mt-1">今日个人业绩</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center items-center ml-5">
						<view class="text-color-red">￥1000.55</view>
						<view class="mt-1">今日团队业绩</view>
					</view>
				</view>
			</view>
		</view>
		<view class="income-platform-wrap">
			<view class="flex flex-col px-4">
				<view class="def-bg p-4 rounded-md">
					<view class="flex">
						<view>平台业绩</view>
						<view class="ml-1 text-xs">切换平台</view>
					</view>
					<view class="flex mt-2">
						<view><image src="../../../static/logo.png" class="icon-img-50"></image></view>
						<view class="flex flex-col p-1">
							<view class="flex justify-start justify-items-center items-center">
								<view>平台一</view>
								<view class="p-1 rounded-md bg-red-600 bg-color-red w-6 text-white text-xs ml-1">LV1</view>
							</view>
							<view class="flex mt-1">
								<view>平台佣金比例</view>
								<view>直推：66.00%</view>
								<view>平级：10.00%</view>
							</view>
						</view>
					</view>
					<view class="flex flex-1 px-4 flex-col justify-center justify-items-center items-center mt-2">
							<view class="flex justify-between justify-items-center items-center w-full">
								<view class="flex flex-col justify-center justify-items-center items-center">
									<view class="text-color-red">￥1000.55</view>
									<view class="mt-1">今日收益</view>
								</view>
								<view class="flex flex-col justify-center justify-items-center items-center ml-5">
									<view class="text-color-red">￥1000.55</view>
									<view class="mt-1">今日个人业绩</view>
								</view>
								<view class="flex flex-col justify-center justify-items-center items-center ml-5">
									<view class="text-color-red">￥1000.55</view>
									<view class="mt-1">今日团队业绩</view>
								</view>
							</view>
							<view class="flex justify-between justify-items-center items-center mt-4 w-full">
								<view class="flex flex-col justify-center justify-items-center items-center">
									<view class="text-color-red">￥1000.55</view>
									<view class="mt-1">今日收益</view>
								</view>
								<view class="flex flex-col justify-center justify-items-center items-center ml-5">
									<view class="text-color-red">￥1000.55</view>
									<view class="mt-1">今日个人业绩</view>
								</view>
								<view class="flex flex-col justify-center justify-items-center items-center ml-5">
									<view class="text-color-red">￥1000.55</view>
									<view class="mt-1">今日团队业绩</view>
								</view>
							</view>
						</view>
					</view>
			</view>
		    <view class="flex flex-col px-4">
				<view class="mt-2">
					<u-subsection :list="list" :current="0"></u-subsection>
				</view>
				<view class="mt-2">
					<view class="p-4 def-bg rounded-md">
						<view class="flex justify-between justify-items-center items-center">
							<view class="flex">
								<view>天天传媒</view>
								<view class="p-1 rounded-md bg-red-600 bg-color-red w-6 text-white text-xs ml-1">LV1</view>
							</view>
							<view>代理ID:1234567</view>
						</view>
						<view class="flex justify-between justify-items-center items-center mt-1">
							<view>今日主播业绩:￥100.00</view>
							<view>主播总业绩:￥200.66</view>
						</view>
						<view class="bgs rounded-md mt-2">
							<view class="p-4">
								<view class="flex justify-between justify-items-center items-center">
									<view>主播昵称：天天向上</view>
									<view>主播ID：147852</view>
								</view>
								<view class="flex justify-between justify-items-center items-center mt-1">
									<view>今日业绩：￥1000.00</view>
									<view>总业绩：￥3000.00</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['我的主播业绩', '直推代理业绩'],
			};
		},
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss">
.head_bg{ width: 100%; height: 304rpx;  }
.head_bg image{ width: 100%; height: 304rpx; }
.income-data-wrap{
	z-index: 1; 
	position: absolute; 
	width: 90%; 
	height: 321rpx; 
	margin: -160rpx 5% 0 5%; 
	background: #fff; 
	box-shadow: 0 4rpx 20rpx 0 #8A38F5; 
	border-radius: 10rpx; 
}
.income-platform-wrap{
	z-index: 1;
	position: absolute; 
	width: 100%; 
	margin-top: 180rpx; 
}
.bgs{
	background-color: #F4F4F4;
}
</style>
